import * as echarts from '../../ec-canvas/echarts';
import {
  operationAnalysis
} from '../../api/index'
import {
  getYMDHMS
} from '../../utils/util'

function setOption(chart, piedata) {
  var option = {
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: piedata.inAndOutData.map(s=> s.day),
      show: true
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['收入', '支出'],
      bottom: 0,
      left: 'center',
      z: 100
    },
    grid: {
      left: '15%',
      right: '8%',
      top: 20,
      bottom: 50
    },
    yAxis: {
       type: 'value'
    },
    series: [{
      name: '收入',
      type: 'line',
      smooth: true,
      data: piedata.inAndOutData.map(s=> s.incomePrice),
    }, {
      name: '支出',
      type: 'line',
      smooth: true,
      data: piedata.inAndOutData.map(s=> s.expendPrice),
    }]
  };

  chart.setOption(option);
  return chart;
}
function setOptionb(chart, piedata) {
  var option = {
    xAxis: {
      type: 'category',
      data: piedata.orderNumData.map(s=> s.day),
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '10%',
      right: '8%',
      top: 20,
      bottom: 20
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: piedata.orderNumData.map(s=> s.orderCount),
        type: 'bar'
      }
    ]
  };

  chart.setOption(option);
  return chart;
}
function setOptionc(chart, piedata) {
  var option = {
    grid: {
      left: '3%',
      right: '4%',
      top: '3%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    tooltip: {
      trigger: 'axis'
    },
    yAxis: {
      type: 'category',
      data: piedata.incomeSourceData.map(s=> s.orderType),
    },
    series: [
      {
        type: 'bar',
        data: piedata.incomeSourceData.map(s=> s.countPrice),
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      lazyLoad: true
    },
    dayMoney: '',
    kssj: getYMDHMS(new Date()).slice(0, 10),
    ksyf: getYMDHMS(new Date()).slice(0, 7),
    nowe: getYMDHMS(new Date()).slice(0, 10),
    dateType: 0,
    info: {},
    show: false,
    tabList: ['日报','月报'],
    des: ''
  },
  bindTimeChange: function (e) {
    if(this.data.dateType==0) {
      this.setData({
        kssj: e.detail.value
      })
    } else {
      this.setData({
        ksyf: e.detail.value
      })
    }
   
    this.getDetail()
  },
  tabChange: function (e) {
    this.setData({
      dateType: e.currentTarget.dataset.index
    })
    this.getDetail()
  },
  initpie: function (piedata, type) {
    let ecComponent = this.selectComponent('#mychart-dom-pie');
    ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      //调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去
      setOption(chart, piedata);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  initpieb: function (piedata, type) {
    let ecComponent = this.selectComponent('#mychart-dom-pieb');
    ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      //调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去
      setOptionb(chart, piedata);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  initpiec: function (piedata, type) {
    let ecComponent = this.selectComponent('#mychart-dom-piec');
    ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      //调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去
      setOptionc(chart, piedata);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  getDetail() {
    this.setData({
      show: false
    })
    operationAnalysis({
      param: {
        dateType: this.data.dateType,
        date: this.data.dateType==0?this.data.kssj:this.data.ksyf + '-01'
      }
    }).then(res => {
      if (res.errorCode != '000000') return
      this.setData({
        info: res.record,
        show: true
      })
      this.initpie(res.record)
      this.initpieb(res.record)
      this.initpiec(res.record)
    })

  },
  onLoad: function (options) {
    this.getDetail()
  }
});